<template>
  <div class="">
    <h1>5.生命周期函数（钩子函数）</h1>
    <button @click="change">change msg</button>
    <h1 id="box">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 0,
    };
  },

  methods: {
    change() {
      this.msg++;
    },
  },
  beforeCreate() {
    console.log(this.msg);
  },
  created() {
    console.log(this.msg);
  },
  beforeMount() {
    console.log(document.getElementById("box").innerHTML); //报错
  },
  //节点挂载之前
  mounted() {
    console.log(document.getElementById("box").innerHTML);
  },
  beforeUpdate() {
    console.log(this.msg);
    console.log(document.getElementById("box").innerHTML);
  },
  updated() {
    console.log(this.msg);
    console.log(document.getElementById("box").innerHTML);
  },
};
</script>

<style lang="scss"></style>
